<template>
  <div>
    <div class="top">
      <!-- 表单查询 -->
      <Form
        ref="formRoomRef"
        name="advanced_search"
        class="ant-advanced-search-form"
        :model="formRoomState"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        @finish="onFinish"
      >
        <Row :gutter="[16, 1]">
          <Col :span="6">
            <Form.Item label="宿舍楼">
              <a-select
                ref="select"
                v-model:value="formRoomState.dormitoryId"
                allow-clear
                placeholder="请选择"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                @change="onSelectDormitory"
              >
                <a-select-option
                  v-for="(item, index) of optionList.dormitoryList"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="房间名称">
              <a-cascader
                v-model:value="formRoomState.dormitoryRoomId"
                allow-clear
                :options="optionList.roomList"
                placeholder="请选择"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                :load-data="onLoadDataRoom"
                :field-names="{ label: 'name', value: 'id' }"
                @change="onChangeRoom"
              />
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="房间类型">
              <a-select
                ref="select"
                v-model:value="formRoomState.roomType"
                placeholder="请选择"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                allow-clear
                @change="onFinish"
              >
                <a-select-option
                  v-for="(item, index) of optionList.roomBedNum"
                  :key="index"
                  :value="item"
                  >{{ item }}人间</a-select-option
                >
              </a-select>
            </Form.Item>
          </Col>
        </Row>
        <Row :gutter="[16, 1]">
          <Col :span="6">
            <Form.Item label="房间状态">
              <a-select
                ref="select"
                v-model:value="formRoomState.roomState"
                placeholder="请选择"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                allow-clear
                @change="onFinish"
              >
                <a-select-option value="1">未满</a-select-option>
                <a-select-option value="2">已满</a-select-option>
                <a-select-option value="3">闲置</a-select-option>
              </a-select>
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="使用状态">
              <a-select
                ref="select"
                v-model:value="formRoomState.useState"
                placeholder="请选择"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                allow-clear
                @change="onFinish"
              >
                <a-select-option :value="0">启用</a-select-option>
                <a-select-option :value="1">停用</a-select-option>
              </a-select>
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="房间属性">
              <a-select
                ref="select"
                v-model:value="formRoomState.roomAttribute"
                allow-clear
                placeholder="请选择"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                @change="onFinishRoomAttribute"
              >
                <a-select-option :value="1" label="男生宿舍">男生宿舍</a-select-option>
                <a-select-option :value="0" label="女生宿舍">女生宿舍</a-select-option>
                <a-select-option :value="3" label="男教职工宿舍">男教职工宿舍</a-select-option>
                <a-select-option :value="4" label="女教职工宿舍">女教职工宿舍</a-select-option>
                <a-select-option :value="5" label="混合教职工宿舍">混合教职工宿舍</a-select-option>
              </a-select>
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item>
              <div class="search">
                <div class="search-btn">
                  <a-button type="primary" class="z-btn-32" @click="query">查询</a-button>
                  <a-button
                    type="primary"
                    style="margin: 0 0 0 16px"
                    class="z-btn-32"
                    ghost
                    @click="reset"
                    >重置</a-button
                  >
                </div>
              </div>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </div>
    <!-- 列表 -->
    <div class="below" style="min-height: 750px">
      <div class="search">
        <div class="search-btn-left">
          <a-button type="primary" style="margin-right: 16px" @click="addRoomTap"
            >添加房间</a-button
          >
          <a-button
            type="primary"
            :disabled="!isDelRoom"
            style="margin-right: 16px"
            @click="onDelRoom()"
            >删除房间</a-button
          >
        </div>
        <div class="search-btn-right">
          <a-button type="primary" style="margin-right: 16px" @click="onExport('room')"
            >房间批量导入</a-button
          >
          <a-button type="primary" @click="onExport('duty')">值日批量导入</a-button>
        </div>
      </div>
      <!-- 表格 -->
      <div>
        <!-- :data-source="tableData.records" -->
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="tableData.records"
          :row-key="record => record.id"
          :pagination="false"
          :loading="loading"
          :scroll="{ x: 1300 }"
        >
          <!-- roomShowStatus -->
          <!-- <template v-slot:emptyText>
            {{ loading ? '' : '暂无数据' }}
          </template> -->
          <template v-slot:emptyText>
            <div class="zz-global-nodata">
              <img
                v-if="searchStatus * 1 === 0"
                src="@/assets/images/accommodation/default-no-data.png"
                alt=""
              />
              <img v-else src="@/assets/images/accommodation/no-data-search-new.png" alt="" />
            </div>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'bedNum'">
              {{ record.bedNum }}&nbsp;
              <span v-if="record.disableNumber >= 1" style="color: red">
                停用 {{ record.disableNumber }}
              </span>
            </template>
            <template v-if="column.dataIndex === 'useState'">
              <a-switch
                v-model:checked="record.useState"
                checked-children="启用"
                un-checked-children="停用"
                :checked-value="0"
                :un-checked-value="1"
                @change="onChangeRoomSwitch(record)"
              />
            </template>
            <template v-if="column.dataIndex === 'genderAttribute'">
              <!-- <span>{{ record.genderAttribute === 1 ? '男生宿舍' : '女生宿舍' }}</span> -->
              <!-- record.dormitoryType === 0 -->
              <span v-if="record.roomType === 0">
                <span v-if="record.genderAttribute === 1">男生宿舍</span>
                <span v-if="record.genderAttribute === 0">女生宿舍</span>
                <span v-if="record.genderAttribute === 2">混合宿舍</span>
              </span>
              <span v-else>
                <span v-if="record.genderAttribute === 1">男教职工宿舍</span>
                <span v-if="record.genderAttribute === 0">女教职工宿舍</span>
                <span v-if="record.genderAttribute === 2">混合教职工宿舍</span>
              </span>
            </template>
            <template v-if="column.dataIndex === 'roomStateName'">
              <span v-if="record.roomStateName === '已满'" class="z-gray-color">{{
                record.roomStateName
              }}</span>
              <span v-if="record.roomStateName === '未满'" class="z-green-color">{{
                record.roomStateName
              }}</span>
              <span v-if="record.roomStateName === '闲置'" class="z-red-color">{{
                record.roomStateName
              }}</span>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-dropdown :trigger="['click']">
                <a-button class="z-btn-24 z-btn-more">
                  更多
                  <DownOutlined />
                </a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="0" @click="onRomUpdate(record)"> 修改 </a-menu-item>
                    <a-menu-item key="1" @click="onRoomDetails(record)"> 详情 </a-menu-item>
                    <a-menu-item key="3" @click="onDuty(record)"> 值日安排 </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </template>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <span style="color: #999999; margin-right: 8px">共{{ tableData.pages }}页</span>
        <a-pagination
          v-model:current="tableData.current"
          v-model:pageSize="tableData.size"
          :page-size-options="pageSizeOptions"
          show-quick-jumper
          :total="tableData.total"
          :show-size-changer="true"
          @change="onChangePagination"
        />
      </div>
    </div>
    <!-- 选择添加学生宿舍楼还是教师宿舍楼 提示框 新加的-->
    <my-dialog
      :dialog-state="selectRoomType.visible"
      :dialog-title="selectRoomType.title"
      :dialog-width="selectRoomType.width"
      :icon-type="selectRoomType.iconType"
      :body-style="selectRoomType.bodyStyle"
      :wrap-class-name="selectRoomType.wrapClassName"
      :footer="null"
      :dialog-index="selectRoomType.index"
      @handleCancel="selectRoomType.visible = false"
    >
      <!-- <template v-slot:location>
        <div class="checkOutStyle checkOutStyleBottom cursor" @click="addStudentRoom">
          <span>学生房间</span>
        </div>
        <div class="checkOutStyle cursor" @click="addTeacherRoom">
          <span>教职工房间</span>
        </div>
      </template> -->
      <!-- <template v-slot:location>
        <div class="checkOutStyle checkOutStyleBottom cursor" @click="addRoomChangeType(0)">
          <span>学生房间</span>
        </div>
        <div class="checkOutStyle cursor" @click="addRoomChangeType(1)">
          <span>教职工房间</span>
        </div>
      </template> -->
      <template v-slot:location>
        <div
          class="checkOutStyle checkOutStyleBottom checkOutStyleNew checkOutStyleNewStudent"
          @click="addRoomChangeType(0)"
        >
          <div class="checkOutStyleNewChild">
            <img
              class="studentFloorLeftIcon"
              src="@/assets/images/accommodation/xuesheng.png"
              alt=""
            />
            <span class="studentFloorLeftText">学生房间模板</span>
          </div>

          <img class="more-new" src="@/assets/images/accommodation/more.png" alt="" />
        </div>
        <div
          class="checkOutStyle checkOutStyleNew checkOutStyleNewTeacher"
          @click="addRoomChangeType(1)"
        >
          <div class="checkOutStyleNewChild">
            <img
              class="studentFloorLeftIcon"
              src="@/assets/images/accommodation/jiaozhigong.png"
              alt=""
            />
            <span class="studentFloorLeftText">教职工房间模板</span>
          </div>

          <img class="more-new" src="@/assets/images/accommodation/more_1.png" alt="" />
        </div>
      </template>
    </my-dialog>
    <!-- 添加宿舍 弹窗 -->
    <my-dialog
      :dialog-state="addRoom.visible"
      :dialog-title="addRoom.title"
      :dialog-width="addRoom.width"
      :icon-type="addRoom.iconType"
      :btn-loading="btnLoading"
      @handleCancel="onCancelRoom"
      @handleOk="onCreateRoom"
    >
      <template v-slot:location>
        <ul class="add-room-dialog">
          <!-- 所属宿舍楼 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">所属宿舍楼：</span>
            </div>
            <a-select
              ref="select"
              v-model:value="formDataCreate.dormitoryId"
              :disabled="isDisable"
              placeholder="请选择"
              @change="onChangeDormitory"
            >
              <!-- v-for="(item, index) of optionList.dormitoryList" -->
              <a-select-option
                v-for="(item, index) of optionList.dormitoryListTransformation"
                :key="index"
                :value="item.id"
                @click="onSelectDorm(item.genderAttribute)"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </li>
          <!-- 所在楼层 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">所在楼层：</span>
            </div>
            <a-select
              ref="select"
              v-model:value="formDataCreate.storey"
              :disabled="isDisable"
              placeholder="请选择"
            >
              <a-select-option v-for="item in dormitoryStorey" :key="item" :value="item">
                {{ `第${item}层` }}
              </a-select-option>
            </a-select>
          </li>
          <!-- 房间名称 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">房间名称：</span>
            </div>
            <a-input
              v-model:value="formDataCreate.name"
              autocomplete="off"
              placeholder="请输入"
            ></a-input>
          </li>
          <!-- 床位数 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">床位数：</span>
            </div>
            <a-input-number
              id="inputNumber"
              v-model:value="formDataCreate.bedNum"
              autocomplete="off"
              :min="1"
              :max="20"
              style="width: 70%"
              placeholder="请输入"
            />
            <!--            <a-input v-model:value="formDataCreate.bedNum" placeholder="请输入"></a-input>-->
          </li>
          <!-- 房间属性 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">房间属性：</span>
            </div>
            <a-select
              v-if="formDataCreate.roomType === 0"
              ref="select"
              v-model:value="formDataCreate.genderAttribute"
              placeholder="请选择"
            >
              <a-select-option v-if="genderAttribute === 2 || genderAttribute === 1" :value="1">
                男生宿舍
              </a-select-option>
              <a-select-option v-if="genderAttribute === 2 || genderAttribute === 0" :value="0">
                女生宿舍
              </a-select-option>
            </a-select>
            <a-select
              v-else
              ref="select"
              v-model:value="formDataCreate.genderAttribute"
              placeholder="请选择"
            >
              <a-select-option v-if="roomTypeShowStatus.male" :value="1">
                男教职工宿舍
              </a-select-option>
              <a-select-option v-if="roomTypeShowStatus.female" :value="0">
                女教职工宿舍
              </a-select-option>
              <a-select-option v-if="roomTypeShowStatus.blend" :value="2">
                混合教职工宿舍
              </a-select-option>
            </a-select>
          </li>
          <!-- 宿舍电话 -->
          <li>
            <div class="add-room-dialog-label">
              <span>房间电话：</span>
            </div>
            <a-input
              v-model:value="formDataCreate.roomPhone"
              autocomplete="off"
              placeholder="请输入"
            ></a-input>
          </li>
          <li style="margin: 0; color: #999; font-size: 12px">
            <div class="add-room-dialog-label"> </div>
            <div> 号码格式：区号-固话号码（如：XXXX-123XXXXX） </div>
          </li>
        </ul>
      </template>
    </my-dialog>
    <!-- 删除房间 提示弹框 -->
    <my-dialog
      :dialog-state="delRoomDialog.visible"
      :dialog-title="delRoomDialog.title"
      :dialog-width="delRoomDialog.width"
      :icon-type="delRoomDialog.iconType"
      :btn-loading="btnLoading"
      @handleCancel="delRoomDialog.visible = false"
      @handleOk="onDeleteRoom"
    >
      <template v-slot:location>
        <div class="checkOutStyle">
          <img src="@/assets/images/accommodation/drawable-xxxhdpi_popu_icon_warn.png" alt="" />
          <span> {{ delRoomText }}</span>
        </div>
      </template>
    </my-dialog>
    <!-- 房间批量导入  值日批量导入 -->
    <my-dialog
      :dialog-state="batchImport.visible"
      :dialog-title="batchImport.title"
      :dialog-width="batchImport.width"
      :icon-type="batchImport.iconType"
      :btn-loading="btnLoading"
      @handleCancel="onCancelUploadFile"
      @handleOk="onUploadFile"
    >
      <template v-slot:location>
        <p v-if="batchImport.state === 'duty'"
          >模板下载:&nbsp;&nbsp;&nbsp;<span
            style="color: #e3c37f; cursor: pointer"
            @click="onDownloadTemplate(2)"
            >值日安排模板</span
          ></p
        >
        <p v-else-if="batchImport.state === 'room'"
          >模板下载:&nbsp;&nbsp;&nbsp;<span
            style="color: #e3c37f; cursor: pointer"
            @click="onDownloadTemplate(3)"
            >下载模板</span
          ></p
        >
        <div style="display: flex; margin-top: 10px">
          <p style="margin-right: 10px">文件上传:</p>
          <Upload
            :accept="'.xls,.xlsx'"
            list-type="picture-card"
            action="#"
            :custom-request="httpRequest"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            @change="onChangeUpload"
          >
            <div v-if="fileList.length" class="fileListStyle">{{ fileList[0].name }}</div>
            <div v-else>
              <!-- <loading-outlined v-if="loading"></loading-outlined> -->
              <!-- <plus-outlined v-else></plus-outlined> -->
              <div>
                <img src="@/assets/images/accommodation/u_plus.png" alt="" style="margin: 0 auto" />
              </div>
            </div>
          </Upload>
        </div>
      </template>
    </my-dialog>
    <!-- 详情 弹窗 -->
    <my-dialog
      class="room-info-new"
      :dialog-state="roomInfo.visible"
      :dialog-title="roomInfo.title"
      :dialog-width="roomInfo.width"
      :icon-type="roomInfo.iconType"
      :footer="false"
      @handleCancel="infoCancel"
      @handleOk="roomInfo.visible = false"
    >
      <template v-slot:location>
        <div class="room">
          <!-- style="width: 33%; padding: 10px" -->
          <div
            v-for="(item, index) of roomDetails"
            :key="index"
            style="padding: 10px"
            :style="{ width: roomInfo.itemWidth }"
          >
            <div class="room-border">
              <div class="room-info">
                <div v-if="roomInfo.roomType === 0" class="photo">
                  <img v-if="item.studentAvatar" :src="item.studentAvatar" alt="" />
                  <img v-else src="@/assets/images/accommodation/popup_img_peo.png" alt="" />
                </div>
                <div v-if="roomInfo.roomType === 1" class="photo">
                  <img v-if="item.teacherAvatar" :src="item.teacherAvatar" alt="" />
                  <img v-else src="@/assets/images/accommodation/popup_img_peo.png" alt="" />
                </div>
                <div style="width: 65%">
                  <Descriptions bordered :column="1" :label-style="labelStyle">
                    <Descriptions.Item v-if="roomInfo.roomType === 0" label="学生姓名">
                      <Tooltip
                        :overlay-style="{ whiteSpace: 'normal' }"
                        :get-popup-container="
                          triggerNode => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
                        placement="topLeft"
                        :title="item.studentUserId ? item.studentName : '未分配'"
                      >
                        <p
                          style="
                            width: 104px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin: auto 0;
                          "
                        >
                          {{ item.studentUserId ? item.studentName : '未分配' }}
                        </p>
                      </Tooltip>
                    </Descriptions.Item>
                    <!-- 新加的教师的 开始 -->
                    <Descriptions.Item v-if="roomInfo.roomType === 1" label="姓名">
                      <Tooltip
                        :overlay-style="{ whiteSpace: 'normal' }"
                        :get-popup-container="
                          triggerNode => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
                        placement="topLeft"
                        :title="item.teacherId ? item.teacherName : '未分配'"
                      >
                        <p
                          style="
                            width: 104px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin: auto 0;
                          "
                        >
                          {{ item.teacherId ? item.teacherName : '未分配' }}
                        </p>
                      </Tooltip>
                    </Descriptions.Item>
                    <!-- 新加的教师的 结束 -->
                    <Descriptions.Item label="床位"
                      ><p
                        style="
                          width: 104px;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          margin: auto 0;
                        "
                      >
                        {{ item.bedNumber }}
                      </p>
                    </Descriptions.Item>
                    <Descriptions.Item v-if="roomInfo.roomType === 0" label="班级">
                      <Tooltip
                        :overlay-style="{ whiteSpace: 'normal' }"
                        :get-popup-container="
                          triggerNode => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
                        placement="topLeft"
                        :title="item.studentUserId ? item.className : '未分配'"
                      >
                        <p
                          style="
                            width: 104px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin: auto 0;
                          "
                        >
                          {{ item.studentUserId ? item.className : '未分配' }}</p
                        >
                      </Tooltip>
                    </Descriptions.Item>
                    <!-- 教师新加的 开始 -->
                    <Descriptions.Item v-if="roomInfo.roomType === 1" label="部门">
                      <p
                        style="
                          width: 104px;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          margin: auto 0;
                        "
                        >{{ item.teacherId ? item.deptName : '未分配' }}</p
                      >
                    </Descriptions.Item>
                    <!-- 教师新加的 结束 -->
                    <Descriptions.Item v-if="roomInfo.roomType === 0" label="班主任">
                      <Tooltip
                        :overlay-style="{ whiteSpace: 'normal' }"
                        :get-popup-container="
                          triggerNode => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
                        placement="topLeft"
                        :title="item.studentUserId ? item.classTeacher : '未分配'"
                      >
                        <p
                          style="
                            width: 104px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin: auto 0;
                          "
                          >{{ item.studentUserId ? item.classTeacher : '未分配' }}</p
                        >
                      </Tooltip>
                    </Descriptions.Item>
                    <Descriptions.Item v-if="roomInfo.roomType === 0" label="状态">
                      <span
                        v-if="item.studentUserId"
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                          font-weight: 400;
                          text-align: LEFT;
                          color: #56d6b7;
                        "
                        >已启用</span
                      >
                      <a-switch
                        v-else
                        v-model:checked="item.bedState"
                        checked-children="启"
                        un-checked-children="停"
                        :checked-value="0"
                        :un-checked-value="1"
                        @change="onChangeBedSwitch(item)"
                      />
                    </Descriptions.Item>
                    <Descriptions.Item v-if="roomInfo.roomType === 1" label="状态">
                      <span
                        v-if="item.teacherId"
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                          font-weight: 400;
                          text-align: LEFT;
                          color: #56d6b7;
                        "
                        >已启用</span
                      >
                      <a-switch
                        v-else
                        v-model:checked="item.bedState"
                        checked-children="启"
                        un-checked-children="停"
                        :checked-value="0"
                        :un-checked-value="1"
                        @change="onChangeBedSwitch(item)"
                      />
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              </div> </div
          ></div>
        </div>
      </template>
    </my-dialog>
    <!-- 值日安排 弹窗 -->
    <my-dialog
      :dialog-state="dutyArrangement.visible"
      :dialog-title="dutyArrangement.title"
      :dialog-width="dutyArrangement.width"
      :btn-loading="btnLoading"
      :icon-type="dutyArrangement.iconType"
      @handleCancel="onCancelDuty"
      @handleOk="onDutys"
    >
      <template v-slot:location>
        <a-tabs v-model:activeKey="weekPlan" type="card">
          <a-tab-pane v-for="item in weekList" :key="item.id" :tab="item.time">
            <div v-if="!item.content.length" class="week-content-add" @click="getRoomStudentList">
              <span>添加</span>
              <img src="@/assets/images/accommodation/u_plus.png" alt="" />
            </div>
            <div v-else class="week-content">
              <span>{{ getDutyStudent(item.content) }}</span>
              <!--              <Popconfirm-->
              <!--                style="width: 500px"-->
              <!--                title="确定要删除吗？"-->
              <!--                ok-text="确定"-->
              <!--                cancel-text="取消"-->
              <!--                :get-popup-container="-->
              <!--                  triggerNode => {-->
              <!--                    return triggerNode.parentNode || document.body;-->
              <!--                  }-->
              <!--                "-->
              <!--                -->
              <!--              >-->
              <img
                src="@/assets/images/accommodation/fi_trash-2.png"
                alt=""
                @click="onDelDuty(item)"
              />
              <!--              </Popconfirm>-->
            </div>
          </a-tab-pane>
        </a-tabs>
      </template>
    </my-dialog>
    <!-- 值日生选择 弹窗 -->
    <my-dialog
      :dialog-state="addStudent.visible"
      :dialog-title="addStudent.title"
      :dialog-width="addStudent.width"
      :icon-type="addStudent.iconType"
      @handleCancel="onCancelSelectDuty"
      @handleOk="onSelectDuty()"
    >
      <template v-slot:location>
        <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
          <div
            v-for="(item, index) of roomStudentList"
            :key="index"
            style="
              width: 33.3%;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
            "
          >
            <div style="width: 100px">
              <div class="duty-style-top">
                <img v-if="item.studentAvatar" :src="item.studentAvatar" alt="" class="head" />
                <img v-else src="@\assets\images\accommodation\icon_big.png" alt="" class="head" />
                <a-checkbox v-model:checked="item.checked" class="checkboxs" />
              </div>
              <div class="centents" style="text-align: center">
                <p>{{ item.name }}</p>
                <p>{{ item.gradeName }}{{ item.className }}</p>
                <p> {{ item.bedNumber }}号床</p>
              </div>
            </div>
          </div>
        </div>

        <!-- <div> -->
        <!-- <span>王多鱼</span><br />
          <span>高一2班 1号床</span> -->
        <!-- </div> -->
      </template>
    </my-dialog>
    <!-- 值日生批量导入 成功后表格弹窗-->
    <my-dialog
      :dialog-state="errorExportInfo.visible"
      :dialog-title="errorExportInfo.title"
      :dialog-width="errorExportInfo.width"
      :icon-type="errorExportInfo.iconType"
      @handleCancel="errorExportInfo.visible = false"
      @handleOk="errorExportInfo.visible = false"
    >
      <template v-slot:location>
        <p
          >详情：共{{ roomDutyExcel.totalNumber }}条， {{ roomDutyExcel.successNumber }}条导入成功，
          {{ roomDutyExcel.failureNumber }}条导入失败</p
        >
        <a-table
          :columns="columnsTableImport"
          :data-source="errorExportList"
          :row-key="record => record.id"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'dutyName'">
              <div
                style="
                  width: 70px;
                  font-size: 14px;
                  color: #222222;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.dutyName"
                >
                  {{ record.dutyName }}
                </Tooltip>
              </div>
            </template>
            <template v-if="column.dataIndex === 'studentIdCard'">
              <div
                style="
                  width: 110px;
                  font-size: 14px;
                  color: #222222;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.studentIdCard"
                >
                  {{ record.studentIdCard }}
                </Tooltip>
              </div>
            </template>
            <template v-if="column.dataIndex === 'dormitoryName'">
              <div
                style="
                  width: 110px;
                  font-size: 14px;
                  color: #222222;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.dormitoryName"
                >
                  {{ record.dormitoryName }}
                </Tooltip>
              </div>
            </template>
            <template v-if="column.dataIndex === 'roomName'">
              <div
                style="
                  width: 100px;
                  font-size: 14px;
                  color: #222222;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.roomName"
                >
                  {{ record.roomName }}
                </Tooltip>
              </div>
            </template>
            <template v-if="column.dataIndex === 'reason'">
              <div
                style="
                  width: 110px;
                  font-size: 14px;
                  color: #222222;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.reason"
                >
                  {{ record.reason }}
                </Tooltip>
              </div>
            </template>
          </template>
        </a-table>
      </template>
    </my-dialog>
    <!-- 批量导入房间 失败弹窗 详情 -->
    <my-dialog
      :dialog-state="batchImportInfo.visible"
      :dialog-title="batchImportInfo.title"
      :dialog-width="batchImportInfo.width"
      :icon-type="batchImportInfo.iconType"
      @handleCancel="batchImportInfo.visible = false"
      @handleOk="batchImportInfo.visible = false"
    >
      <template v-slot:location>
        <div>
          <p
            >详情：共{{ roomExcel.totalNumber }}条，{{ roomExcel.successNumber }}条导入成功，{{
              roomExcel.failureNumber
            }}条导入失败</p
          >
          <a-table
            :columns="batchExportColumns"
            :data-source="batchExportList"
            :row-key="record => record.id"
            :pagination="false"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'useState'">
                <span>{{ record.useState === 0 ? '启用' : '停用' }}</span>
              </template>
              <template v-if="column.dataIndex === 'genderAttribute'">
                <span>{{ record.genderAttribute === 1 ? '男生宿舍' : '女生宿舍' }}</span>
              </template>
              <template v-if="column.dataIndex === 'action'">
                <span>--</span>
              </template>
              <template v-if="column.dataIndex === 'dormitoryName'">
                <div
                  style="
                    width: 110px;
                    font-size: 14px;
                    color: #222222;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  <Tooltip
                    :overlay-style="{ whiteSpace: 'normal' }"
                    :get-popup-container="
                      triggerNode => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    placement="topLeft"
                    :title="record.dormitoryName"
                  >
                    {{ record.dormitoryName }}
                  </Tooltip>
                </div>
              </template>
              <template v-if="column.dataIndex === 'roomPhone'">
                <div
                  style="
                    width: 110px;
                    font-size: 14px;
                    color: #222222;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  <Tooltip
                    :overlay-style="{ whiteSpace: 'normal' }"
                    :get-popup-container="
                      triggerNode => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    placement="topLeft"
                    :title="record.roomPhone"
                  >
                    {{ record.roomPhone }}
                  </Tooltip>
                </div>
              </template>
              <template v-if="column.dataIndex === 'reason'">
                <div
                  style="
                    width: 110px;
                    font-size: 14px;
                    color: #222222;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  <Tooltip
                    :overlay-style="{ whiteSpace: 'normal' }"
                    :get-popup-container="
                      triggerNode => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    placement="topLeft"
                    :title="record.reason"
                  >
                    {{ record.reason }}
                  </Tooltip>
                </div>
              </template>
            </template>
          </a-table>
        </div>
      </template>
    </my-dialog>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import {
  Form,
  Row,
  Col,
  Descriptions,
  message,
  Upload,
  Popconfirm,
  Cascader,
  Tooltip
} from 'ant-design-vue';
import { DownOutlined } from '@ant-design/icons-vue';
import MyDialog from '@/components/dialog/index.vue';
import {
  getRoom,
  deleteRoom,
  updateRoomState,
  createRoom,
  getRoomDetails,
  updateBedState,
  updateRoom,
  getRoomDuty,
  createRoomDutyExcel,
  createRoomExcel,
  getRoomStudent,
  createRoomDuty,
  removeRoomDuty,
  getRoomInfo
} from '@/api/accommodation';
import { template } from '@/api/studentManage';
import { getDormitory, getDormitoryAll, floorList, floorRoom, roomBedNum } from '@/api/common';
import { debounce } from '@/utils/debounce.js';
const roomShowStatus = ref(false);
onMounted(() => {
  getRoomList();
  getDormitoryList();
  getRoomBedNum();
});

const labelStyle = ref({
  width: '80px'
});
/** 详情弹窗关闭 方法 */
function infoCancel() {
  roomInfo.visible = false;
  getRoomList();
}
// 选择宿舍楼类型 弹框 新加的
const selectRoomType = reactive({
  title: '房间模板',
  visible: false,
  width: '328px',
  iconType: 'default',
  bodyStyle: {
    padding: '24px'
  },
  wrapClassName: 'room-type-new',
  index: 999
});
const loading = ref(true);
/** ***** 列表下拉信息 */
const formRoomState = ref({
  dormitoryId: null, // 宿舍楼
  dormitoryRoomId: [], // 房间名称
  roomType: null, // 房间类型
  roomState: null, // 房间状态
  useState: null, // 使用状态
  roomAttribute: null, // 房间属性
  roomAttributeNew: null // 房间属性过度
  // roomType: null // 房间的类型 0 学生  1 教师
});

// 选完 房间属性之后赋值
const formRoomStateRoomType = ref({
  roomType: null // 房间的类型 0 学生  1 教师
});
// 下拉选项列表
const optionList = ref({
  dormitoryListAll: [],
  dormitoryListStudent: [],
  dormitoryListTeacher: [],
  dormitoryListTransformation: [],
  dormitoryList: [],
  roomList: [],
  roomBedNum: []
});
// 获取宿舍楼列表
const getRoomBedNum = () => {
  roomBedNum().then(res => {
    if (res.data.code === 200) {
      optionList.value.roomBedNum = res.data.data;
    }
  });
};
// 获取宿舍楼列表
const getDormitoryList = () => {
  getDormitoryAll().then(res => {
    if (res.data.code === 200) {
      optionList.value.dormitoryListStudent = [];
      optionList.value.dormitoryListTeacher = [];
      optionList.value.dormitoryListAll = res.data.data;
      optionList.value.dormitoryList = res.data.data;
      // 学生选择的 楼
      res.data.data.forEach(item => {
        if (item.dormitoryType * 1 === 0) {
          optionList.value.dormitoryListStudent.push(item);
        } else {
          optionList.value.dormitoryListTeacher.push(item);
        }
      });
      optionList.value.roomList = res.data.data;
      optionList.value.roomList.forEach(elem => {
        elem.isLeaf = false;
      });
    }
  });
};
// 获取宿舍楼层列表
const getFloorList = value => {
  floorList(value).then(res => {
    if (res.data.code === 200) {
      res.data.data.forEach(elem => {
        let obj = {
          name: `${elem.storey}楼`,
          id: elem.storey,
          storey: elem.storey,
          dormitoryId: elem.id,
          floor: elem.floor,
          isLeaf: false
        };
        optionList.value.roomList.push(obj);
      });
      console.log('optionList', optionList.value);
    }
  });
};
// 宿舍楼楼层
const dormitoryStorey = ref(0);
// 改变宿舍楼回调
const onSelectDormitory = value => {
  formRoomState.value.dormitoryRoomId = [];
  optionList.value.roomList = [];
  if (value !== undefined) {
    getFloorList(value);
  } else {
    getDormitoryList();
  }
};
let genderAttribute = ref(2);
// 控制编辑的时候 是否能选择某一属性的宿舍楼
const roomTypeShowStatus = ref({
  male: true,
  female: true,
  blend: true
});
// 通过选择宿舍楼判断房间属性
function onSelectDorm(id) {
  console.log('房间属性是什么', id);
  genderAttribute.value = id;
  formDataCreate.value.genderAttribute = null;
  // 选的女教职工
  if (id === 0) {
    roomTypeShowStatus.value = {
      male: false,
      female: true,
      blend: false
    };
  }
  // 选的男教职工
  if (id === 1) {
    roomTypeShowStatus.value = {
      male: true,
      female: false,
      blend: false
    };
  }
  // 选的混合教职工
  if (id === 2) {
    roomTypeShowStatus.value = {
      male: true,
      female: true,
      blend: true
    };
  }
}
// 选择房间回调
const onChangeRoom = (value, selectedOptions) => {
  // if (selectedOptions[0].dormitoryId !== undefined) {
  //   formRoomState.value.dormitoryId = selectedOptions[0].dormitoryId;
  // } else {
  //   formRoomState.value.dormitoryId = value[0];
  // }
  if (value.length === 3) {
    formRoomState.value.dormitoryId = value[0];
  }
};
// 选择房间异步动态加载
const onLoadDataRoom = selectedOptions => {
  console.log(111);
  if (!formRoomState.value.dormitoryId) {
    formRoomState.value.dormitoryId = selectedOptions[0].id;
  }
  const targetOption = selectedOptions[selectedOptions.length - 1];
  targetOption.loading = true; // load options lazily
  if (targetOption.dormitoryName) {
    floorList(targetOption.id).then(res => {
      if (res.data.code === 200) {
        targetOption.loading = false;
        targetOption.children = [];
        res.data.data.forEach(elem => {
          let obj = {
            name: `${elem.storey}楼`,
            id: elem.storey,
            storey: elem.storey,
            floor: elem.floor,
            isLeaf: false
          };
          targetOption.children.push(obj);
        });
        optionList.value.roomList = [...optionList.value.roomList];
      }
    });
  }
  if (targetOption.floor) {
    let id = selectedOptions[0].floor ? formRoomState.value.dormitoryId : selectedOptions[0].id;
    floorRoom(id, targetOption.storey).then(res => {
      if (res.data.code === 200) {
        targetOption.loading = false;
        targetOption.children = [];
        res.data.data.forEach(elem => {
          let obj = {
            name: elem.name,
            id: elem.id,
            isLeaf: true
          };
          targetOption.children.push(obj);
        });
        optionList.value.roomList = [...optionList.value.roomList];
      }
    });
  }
};

// 房间id
const roomId = ref(null);
const roomDutyExcel = ref({});
const roomExcel = ref({});
const searchStatus = ref(0);
// 添加房间组装数据
let formDataCreate = ref({
  dormitoryId: null, // 所属宿舍楼ID
  dormitoryName: null, // 所属宿舍楼名称
  storey: null, // 所在楼层
  name: null, // 房间名称
  bedNum: null, // 床位数
  genderAttribute: null, // 房间属性
  roomPhone: null, // 宿舍电话
  roomType: null // 0 是学生房间  1是 教师房间
});
// 宿舍楼选项改变回调
const onChangeDormitory = value => {
  formRoomState.value.dormitoryRoomId = [];
  dormitoryStorey.value = 0;
  formDataCreate.value.storey = null;
  dormitoryStorey.value = optionList.value.dormitoryList.filter(
    elem => elem.id === value
  )[0].totalStorey;
  formDataCreate.value.dormitoryName = optionList.value.dormitoryList.filter(
    elem => elem.id === value
  )[0].name;
};
// 清空form表单
const onCancelRoom = () => {
  if (addRoom.title !== '编辑房间') {
    // new jia
    selectRoomType.visible = true;
  }
  btnLoading.value = false;
  formDataCreate.value = {
    dormitoryId: null, // 所属宿舍楼ID
    dormitoryName: null, // 所属宿舍楼名称
    storey: null, // 所在楼层
    name: null, // 房间名称
    bedNum: null, // 床位数
    genderAttribute: null, // 房间属性
    roomPhone: null // 宿舍电话
    // roomType: null // 0 是学生房间  1是 教师房间
  };
  dormitoryStorey.value = 0;
  addRoom.visible = false;
  isDisable.value = false;
};

// 清空form表单
const onCancelRooms = () => {
  formDataCreate.value = {
    dormitoryId: null, // 所属宿舍楼ID
    dormitoryName: null, // 所属宿舍楼名称
    storey: null, // 所在楼层
    name: null, // 房间名称
    bedNum: null, // 床位数
    genderAttribute: null, // 房间属性
    roomPhone: null, // 宿舍电话
    roomType: null // 0 是学生房间  1是 教师房间
  };
  dormitoryStorey.value = 0;
};

// 查询
function query() {
  searchStatus.value = 1;
  let obj = {
    dormitoryId: formRoomState.value.dormitoryId, // 宿舍楼
    roomId: formRoomState.value.dormitoryRoomId.length
      ? formRoomState.value.dormitoryRoomId[formRoomState.value.dormitoryRoomId.length - 1]
      : null, // 房间名称
    bedNum: formRoomState.value.roomType, // 房间类型
    roomState: formRoomState.value.roomState, // 房间状态
    useState: formRoomState.value.useState, // 使用状态
    genderAttribute: formRoomState.value.roomAttributeNew, // 房间属性
    roomType: formRoomStateRoomType.value.roomType // 房间的类型 0 学生  1 教师
  };
  console.log(roomId, 'obj');
  console.log('搜索条件', obj);
  loading.value = true;
  getRoom(obj)
    .then(res => {
      loading.value = false;
      if (res.data.code === 200) {
        tableData.value = res.data.data;
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
}
// 重置
function reset() {
  searchStatus.value = 0;
  formRoomState.value = {
    dormitoryId: null, // 宿舍楼
    dormitoryRoomId: [], // 房间名称
    roomType: null, // 房间类型
    roomState: null, // 房间状态
    useState: null, // 使用状态
    roomAttribute: null, // 房间属性
    roomAttributeNew: null // 房间属性过度
    // roomType: null // 房间的类型 0 学生  1 教师
  };
  formRoomStateRoomType.value = {
    roomType: null
  };
  getRoomList();
  getDormitoryList();
}
// 验证表单
const verificationForm = () => {
  if (!formDataCreate.value.dormitoryId) {
    message.error('请选择所属宿舍楼');
    return false;
  }
  if (!formDataCreate.value.storey) {
    message.error('请选择所在楼层');
    return false;
  }
  if (!formDataCreate.value.name) {
    message.error('请输入房间名称');
    return false;
  } else if (formDataCreate.value.name.length > 30) {
    message.error('房间名称限制输入30个字符');
    return false;
  }
  if (!formDataCreate.value.bedNum) {
    message.error('请输入床位数');
    return false;
  }
  if (
    formDataCreate.value.genderAttribute === null ||
    formDataCreate.value.genderAttribute === ''
  ) {
    message.error('请选择房间属性');
    return false;
  }
  if (formDataCreate.value.roomPhone) {
    // 手机正则
    let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
    // let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
    // 座机正则
    let landlinePtn = /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
    // let landlinePtn = /^0\d{2,3}-?\d{7,8}$/;
    // 0537-12451245
    if (
      !reg.test(formDataCreate.value.roomPhone) &&
      !landlinePtn.test(formDataCreate.value.roomPhone)
    ) {
      message.error('房间电话格式有误');
      return false;
    }
  }
  return true;
};
// 添加房间
const onCreateRoom = debounce(value => {
  btnLoading.value = true;
  if (verificationForm()) {
    if (!roomId.value) {
      formDataCreate.value.locationId = optionList.value.dormitoryList.filter(
        item => item.id === formDataCreate.value.dormitoryId
      )[0].locationId;
      createRoom(formDataCreate.value)
        .then(res => {
          if (res.data.code === 200) {
            message.success(res.data.msg);
            onCancelRoom();
            btnLoading.value = false;
          } else {
            btnLoading.value = false;
            message.error(res.data.msg);
            // onCancelRooms();
          }
          getRoomList(1);
          selectRoomType.visible = false;
        })
        .catch(() => {
          btnLoading.value = false;
        });
    } else {
      let obj = {
        ...formDataCreate.value,
        id: roomId.value
      };

      updateRoom(obj)
        .then(res => {
          if (res.data.code === 200) {
            message.success(res.data.msg);
          } else {
            message.error(res.data.msg);
          }
          onCancelRoom();
          getRoomList(1);
          btnLoading.value = false;
          selectRoomType.visible = false;
        })
        .catch(() => {
          btnLoading.value = false;
        });
    }
  } else {
    btnLoading.value = false;
  }
}, 500);
// 添加房间 弹窗
const addRoom = reactive({
  title: '添加房间',
  visible: false,
  width: '388px',
  iconType: 'default'
});
let isDisable = ref(false);
// 添加房间弹窗按钮
const addRoomTap = () => {
  // 显示选择房间类型弹窗
  selectRoomType.visible = true;
  // addRoom.visible = true;
  // addRoom.title = '添加房间';
  // roomId.value = null;
};
// 添加学生房间
const addStudentRoom = () => {
  // let dormitoryList = [];
  // optionList.value.dormitoryList.forEach(item => {
  //   if (
  //     item.genderAttribute * 1 === 0 ||
  //     item.genderAttribute * 1 === 1 ||
  //     item.genderAttribute * 1 === 2
  //   ) {
  //     dormitoryList.push(item);
  //   }
  //   optionList.value.dormitoryList = dormitoryList;
  // });
  optionList.value.dormitoryListTransformation = optionList.value.dormitoryListStudent;
  addRoom.visible = true;
  addRoom.title = '添加房间';
  roomId.value = null;
};
// 添加教师房间
const addTeacherRoom = () => {
  optionList.value.dormitoryListTransformation = optionList.value.dormitoryListTeacher;
  addRoom.visible = true;
  addRoom.title = '添加房间';
  roomId.value = null;
};
const addRoomChangeType = type => {
  if (type === 0) {
    addRoom.title = '添加学生房间';
    optionList.value.dormitoryListTransformation = optionList.value.dormitoryListStudent;
  } else {
    addRoom.title = '添加教职工房间';
    optionList.value.dormitoryListTransformation = optionList.value.dormitoryListTeacher;
    // 控制教师房间属性
    roomTypeShowStatus.value = {
      male: true,
      female: true,
      blend: true
    };
  }
  formDataCreate.value.roomType = type;
  addRoom.visible = true;
  // addRoom.title = '添加房间';
  roomId.value = null;
  // new jia
  selectRoomType.visible = false;
};
// 获取房间列表
const getRoomList = num => {
  let where = {
    size: tableData.value.size,
    dormitoryId: formRoomState.value.dormitoryId, // 宿舍楼
    roomId: formRoomState.value.dormitoryRoomId.length
      ? formRoomState.value.dormitoryRoomId[formRoomState.value.dormitoryRoomId.length - 1]
      : null, // 房间名称
    occupancyNumber: formRoomState.value.roomType, // 房间类型
    roomState: formRoomState.value.roomState, // 房间状态
    useState: formRoomState.value.useState, // 使用状态
    // genderAttribute: formRoomState.value.roomAttribute, // 房间属性
    genderAttribute: formRoomState.value.roomAttributeNew, // 房间属性
    roomType: formRoomStateRoomType.value.roomType // 房间的类型 0 学生  1 教师
  };
  // console.log(where, 'where');
  where.current = num || tableData.value.current;
  loading.value = true;
  getRoom(where)
    .then(res => {
      loading.value = false;
      if (res.data.code === 200) {
        tableData.value = res.data.data;
        loading.value = false;
        roomShowStatus.value = true;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
// 房间详情数据
const roomDetails = ref([]);
// 获取房间详情 按钮
const onRoomDetails = value => {
  console.log(value, '房间啊数据');
  // if (value.occupancyNumber === 0) {
  //   message.warning('房间人数为空');
  //   return;
  // }
  roomId.value = value.id;
  getRoomDetails(value.id).then(res => {
    if (res.data.code === 200) {
      if (res.data.data.length) {
        console.log('啥玩意111', value);
        roomDetails.value = res.data.data;
        console.log('roomDetails', res.data.data);
        roomInfo.roomType = value.roomType;
        roomInfo.visible = true;
        // roomInfo.title = `${value.genderAttribute === 1 ? '男生宿舍' : '女生宿舍'}${
        //   value.dormitoryName
        // }
        // ${value.name}`;
        let text = '';
        // dormitoryType
        // if (value.roomType === 0) {
        //   if (value.genderAttribute === 1) {
        //     text = '男生宿舍';
        //   } else if (value.genderAttribute === 0) {
        //     text = '女生宿舍';
        //   } else if (value.genderAttribute === 2) {
        //     text = '混合宿舍';
        //   }
        // } else {
        //   if (value.genderAttribute === 1) {
        //     text = '男教职工宿舍';
        //   } else if (value.genderAttribute === 0) {
        //     text = '女教职工宿舍';
        //   } else if (value.genderAttribute === 2) {
        //     text = '混合教职工宿舍';
        //   }
        // }
        roomInfo.title = `${text}${value.dormitoryName}${value.name}`;
        if (res.data.data.length === 1) {
          roomInfo.width = '383px';
          roomInfo.itemWidth = '100%';
        }
        if (res.data.data.length === 2) {
          roomInfo.width = '717px';
          roomInfo.itemWidth = '50%';
        }
        if (res.data.data.length > 2) {
          roomInfo.width = '1100px';
          roomInfo.itemWidth = '33%';
        }
      } else {
        message.warning('房间异常');
      }
    } else {
      message.error(res.data.msg);
    }
  });
};
// 修改床位状态
const onChangeBedSwitch = value => {
  const obj = {
    id: value.id,
    bedState: value.bedState
  };
  updateBedState(obj).then(res => {
    if (res.data.code === 200) {
      message.success(res.data.msg);
    } else {
      message.error(res.data.msg);
      if (value.bedState === 1) {
        value.bedState = 0;
      } else if (value.bedState === 0) {
        value.bedState = 1;
      }
    }
  });
};
// 房间详情 弹窗
const roomInfo = reactive({
  title: '房间详情',
  visible: false,
  width: '1100px',
  iconType: 'default',
  roomType: -1,
  itemWidth: '33%'
});
// 房间编辑
const onRomUpdate = value => {
  console.log('编辑房间列表取值', value);
  // genderAttribute.value = value.genderAttribute;
  // formDataCreate.value = {
  //   dormitoryId: value.dormitoryId, // 所属宿舍楼ID
  //   dormitoryName: value.dormitoryName, // 所属宿舍楼名称
  //   storey: value.storey, // 所在楼层
  //   name: value.name, // 房间名称
  //   bedNum: value.bedNum, // 床位数
  //   genderAttribute: value.genderAttribute, // 房间属性
  //   roomPhone: value.roomPhone, // 宿舍电话
  //   roomType: value.roomType
  // };
  // addRoom.visible = true;
  // addRoom.title = '编辑房间';
  // isDisable.value = true;
  // roomId.value = value.id;
  // dormitoryStorey.value = optionList.value.dormitoryList.filter(
  //   elem => elem.id === value.dormitoryId
  // )[0].totalStorey;

  // // 解决【所属宿舍楼】回显id
  // optionList.value.dormitoryListTransformation = optionList.value.dormitoryList;

  // // 新家的逻辑

  // // 没有分人
  // if (value.isAllocation === 0) {
  //   // 选的女教职工
  //   if (value.genderAttribute === 0) {
  //     roomTypeShowStatus.value = {
  //       male: false,
  //       female: true,
  //       blend: false
  //     };
  //   }
  //   // 选的男教职工
  //   if (value.genderAttribute === 1) {
  //     roomTypeShowStatus.value = {
  //       male: true,
  //       female: false,
  //       blend: false
  //     };
  //   }
  //   // 选的混合教职工
  //   if (value.genderAttribute === 2) {
  //     roomTypeShowStatus.value = {
  //       male: true,
  //       female: true,
  //       blend: true
  //     };
  //   }
  // }
  // // 分了人了
  // if (value.isAllocation === 1) {
  //   // 0 全是女生的房间
  //   if (value.dormitoryAttributeType === 0) {
  //     roomTypeShowStatus.value = {
  //       male: false,
  //       female: true,
  //       blend: false
  //     };
  //   }
  //   // 1 全是男生的房间
  //   if (value.dormitoryAttributeType === 1) {
  //     roomTypeShowStatus.value = {
  //       male: true,
  //       female: false,
  //       blend: false
  //     };
  //   }
  //   // 2 有男有女的房间
  //   if (value.dormitoryAttributeType === 2) {
  //     roomTypeShowStatus.value = {
  //       male: false,
  //       female: false,
  //       blend: true
  //     };
  //   }
  // }
  // getFloorList(value.dormitoryId);
  // console.log('dormitoryId', value.dormitoryId);
  getRoomInfo(value.id).then(res => {
    if (res.data.code === 200) {
      console.log('新加的接口获取房间详情', res.data.data);
      let json = res.data.data;
      genderAttribute.value = json.genderAttribute;
      formDataCreate.value = {
        dormitoryId: json.dormitoryId, // 所属宿舍楼ID
        dormitoryName: json.dormitoryName, // 所属宿舍楼名称
        storey: json.storey, // 所在楼层
        name: json.name, // 房间名称
        bedNum: json.bedNum, // 床位数
        genderAttribute: json.genderAttribute, // 房间属性
        roomPhone: json.roomPhone, // 宿舍电话
        roomType: json.roomType
      };
      addRoom.visible = true;
      addRoom.title = '编辑房间';
      isDisable.value = true;
      roomId.value = json.id;
      dormitoryStorey.value = optionList.value.dormitoryList.filter(
        elem => elem.id === json.dormitoryId
      )[0].totalStorey;

      // 解决【所属宿舍楼】回显id 问题
      optionList.value.dormitoryListTransformation = optionList.value.dormitoryList;

      // 新家的逻辑
      // 教师房间
      if (json.roomType === 1) {
        // // 0 女   1  男  2  混合 //   女  只能显示 女和混合
        // if (json.genderAttribute === 0) {
        //   roomTypeShowStatus.value = {
        //     male: false,
        //     female: true,
        //     blend: true
        //   };
        // }
        // // 0 女   1  男  2  混合 //   男  只能显示 男和混合
        // if (json.genderAttribute === 1) {
        //   roomTypeShowStatus.value = {
        //     male: true,
        //     female: false,
        //     blend: true
        //   };
        // }
        // // 0 女   1  男  2  混合 //   混合都显示
        // if (json.genderAttribute === 2) {
        //   roomTypeShowStatus.value = {
        //     male: true,
        //     female: true,
        //     blend: true
        //   };
        // }
        // ----------------------------------
        // 女楼  只显示女教师宿舍
        if (json.dormitoryGenderAttribute === 0) {
          roomTypeShowStatus.value = {
            male: false,
            female: true,
            blend: false
          };
          return false;
        }
        // 男楼  只显示男教师宿舍
        if (json.dormitoryGenderAttribute === 1) {
          roomTypeShowStatus.value = {
            male: true,
            female: false,
            blend: false
          };
          return false;
        }

        // 混合楼
        if (json.dormitoryGenderAttribute === 2) {
          // 没有分人
          if (json.isAllocation === 0) {
            // 女
            if (json.genderAttribute === 0) {
              roomTypeShowStatus.value = {
                male: false,
                female: true,
                blend: true
              };
              return false;
            }
            // 男
            if (json.genderAttribute === 1) {
              roomTypeShowStatus.value = {
                male: true,
                female: false,
                blend: true
              };
              return false;
            }
            // 混合
            if (json.genderAttribute === 2) {
              roomTypeShowStatus.value = {
                male: true,
                female: true,
                blend: true
              };
              return false;
            }
          }
          // 分了人了
          if (json.isAllocation === 1) {
            // 0 全是女生的房间
            if (json.roomGenderCount === 0) {
              roomTypeShowStatus.value = {
                male: false,
                female: true,
                blend: true
              };
              return false;
            }
            // 1 全是男生的房间
            if (json.roomGenderCount === 1) {
              roomTypeShowStatus.value = {
                male: true,
                female: false,
                blend: true
              };
              return false;
            }
            // 2 有男有女的房间
            if (json.roomGenderCount === 2) {
              roomTypeShowStatus.value = {
                male: false,
                female: false,
                blend: true
              };
              return false;
            }
          }
        }
      }
    } else {
      message.error(res.data.msg);
    }
  });
};
// 房间状态开关回调
const onChangeRoomSwitch = debounce(value => {
  const obj = {
    id: value.id,
    useState: value.useState
  };
  loading.value = true;
  updateRoomState(obj)
    .then(res => {
      loading.value = false;
      if (res.data.code === 200) {
        message.success(res.data.msg);
        getRoomList(1);
      } else {
        message.error(res.data.msg);
        if (value.useState === 1) {
          value.useState = 0;
        } else if (value.useState === 0) {
          value.useState = 1;
        }
      }
    })
    .catch(() => {
      loading.value = false;
    });
}, 500);

// 表格数据
let tableData = ref({
  current: 1, // 当前页
  optimizeCountSql: true, // 是否有上一页
  orders: [], // 排序
  pages: 0, // 总页数
  records: [], // 数据
  searchCount: true, // 是否有下一页
  size: 10, // 当前条数
  total: 0 // 总条数
});
// table列项
const columns = reactive([
  {
    key: 'name',
    title: '房间名',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    fixed: 'left'
  },
  {
    key: 'dormitoryName',
    title: '所属宿舍楼',
    dataIndex: 'dormitoryName',
    scopedSlots: { customRender: 'dormitoryName' }
  },
  {
    key: 'genderAttribute',
    title: '房间属性',
    dataIndex: 'genderAttribute',
    scopedSlots: { customRender: 'genderAttribute' }
  },
  {
    key: 'storey',
    title: '楼层',
    dataIndex: 'storey',
    scopedSlots: { customRender: 'storey' }
  },
  {
    key: 'bedNum',
    title: '床位数',
    dataIndex: 'bedNum',
    scopedSlots: { customRender: 'bedNum' }
  },
  {
    key: 'occupancyNumber',
    title: '入住人数',
    dataIndex: 'occupancyNumber',
    scopedSlots: { customRender: 'occupancyNumber' }
  },
  {
    key: 'airBedNumber',
    title: '空床数',
    dataIndex: 'airBedNumber',
    scopedSlots: { customRender: 'airBedNumber' }
  },
  {
    key: 'roomStateName',
    title: '房间状态',
    dataIndex: 'roomStateName',
    scopedSlots: { customRender: 'roomStateName' }
  },
  {
    key: 'useState',
    title: '使用状态',
    dataIndex: 'useState',
    scopedSlots: { customRender: 'useState' }
  },
  {
    key: 'action',
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]);
// 表格多选选项
const selectedRowKeys = ref([]);
// 表格多选回调
const onSelectChange = (rowKeys, rows) => {
  selectedRowKeys.value = rowKeys;
};
watch(selectedRowKeys, value => {
  if (value.length) {
    isDelRoom.value = true;
  } else {
    isDelRoom.value = false;
  }
});
// 指定每页条数
const pageSizeOptions = ref(['10', '20', '30', '40', '50', '100', '500', '1000']);
// 分页回调
const onChangePagination = checked => {
  getRoomList();
};

// 批量导入失败返回网页 弹窗
const errorExportInfo = reactive({
  title: '导入失败详情',
  visible: false,
  width: '1000px',
  iconType: 'default'
});
// 批量导入失败返表格列表项
const columnsTableImport = reactive([
  {
    key: 'roomName',
    title: '房间名称',
    dataIndex: 'roomName',
    scopedSlots: { customRender: 'roomName' },
    width: 200
  },
  {
    key: 'dormitoryName',
    title: '宿舍楼',
    dataIndex: 'dormitoryName',
    scopedSlots: { customRender: 'dormitoryName' },
    width: 200
  },
  {
    key: 'dutyName',
    title: '值日生姓名',
    dataIndex: 'dutyName',
    scopedSlots: { customRender: 'dutyName' },
    width: 200
  },
  {
    key: 'studentIdCard',
    title: '身份证',
    dataIndex: 'studentIdCard',
    scopedSlots: { customRender: 'studentIdCard' },
    width: 200
  },
  {
    key: 'weekName',
    title: '值日生日期',
    dataIndex: 'weekName',
    scopedSlots: { customRender: 'weekName' },
    width: 200
  },
  {
    key: 'reason',
    title: '原因',
    dataIndex: 'reason',
    scopedSlots: { customRender: 'reason' },
    width: 200
  }
]);
// 日期计划
const weekPlan = ref(1);
// 日期列表
const weekList = reactive([
  {
    id: 1,
    time: '周一',
    content: []
  },
  {
    id: 2,
    time: '周二',
    content: []
  },
  {
    id: 3,
    time: '周三',
    content: []
  },
  {
    id: 4,
    time: '周四',
    content: []
  },
  {
    id: 5,
    time: '周五',
    content: []
  },
  {
    id: 6,
    time: '周六',
    content: []
  },
  {
    id: 7,
    time: '周日',
    content: []
  }
]);
// 值日安排 弹窗
const dutyArrangement = reactive({
  title: '值日安排',
  visible: false,
  width: '540px',
  iconType: 'default'
});
// 值日安排弹窗按钮
const onDuty = value => {
  if (value.occupancyNumber === 0) {
    message.warning('房间人数为空');
    return;
  }
  roomId.value = value.id;
  getRoomDuty(value.id).then(res => {
    if (res.data.code === 200) {
      weekList.forEach(item => {
        item.content = [];
        res.data.data.forEach(elem => {
          if (item.id === elem.weekInfo) item.content.push(elem);
        });
      });
      console.log('weekList', weekList);
      console.log('周几', getWeekDate() * 1 - 1);
      let week = getWeekDate() * 1 - 1;
      weekPlan.value = week;
      dutyArrangement.visible = true;
    } else {
      message.error(res.data.msg);
    }
  });
};
const getWeekDate = () => {
  let now = new Date();
  let day = now.getDay();
  let weeks = [1, 2, 3, 4, 5, 6, 7];
  let week = weeks[day];
  return week;
};
// 获取当天值日生信息
const getDutyStudent = value => {
  let arr = [];
  value.forEach(elem => {
    arr.push(elem.studentName);
  });
  return arr.join('、');
};
// 关闭值日弹窗
const onCancelDuty = () => {
  weekList.forEach(elem => {
    elem.content = [];
  });
  weekPlan.value = 1;
  btnLoading.value = false;
  dutyArrangement.visible = false;
};
const roomStudentList = ref([]);
// 获取房间的学生信息
const getRoomStudentList = () => {
  getRoomStudent(roomId.value).then(res => {
    if (res.data.code === 200) {
      res.data.data.forEach(elem => {
        elem.checked = false;
      });
      roomStudentList.value = res.data.data;
      if (roomStudentList.value.length) {
        addStudent.visible = true;
      } else {
        message.warning('该房间暂无住宿学生');
      }
    }
  });
};
// 值日生选择 弹窗
const addStudent = reactive({
  title: '值日生选择',
  visible: false,
  width: '440px',
  iconType: 'default'
});
// 关闭选择值日生弹窗
const onCancelSelectDuty = () => {
  roomStudentList.value.forEach(elem => {
    elem.checked = false;
  });
  addStudent.visible = false;
};
let formData = ref([]);
// 确定选择值日生
const onSelectDuty = () => {
  let arr = roomStudentList.value.filter(elem => elem.checked);
  if (!arr.length) {
    message.error('请选择学生');
    return;
  } else {
    arr.forEach(elem => {
      let obj = {
        studentName: elem.name,
        dormitoryId: elem.dormitoryId,
        roomId: roomId.value,
        classId: elem.classId,
        studentUserId: elem.studentUserId,
        week: weekPlan.value
      };
      console.log('obj', obj);

      weekList.forEach(item => {
        if (item.id === Number(weekPlan.value)) item.content.push(obj);
      });

      // const wk = weekList.filter(item => item.id === Number(weekPlan.value)).content;
      // wk.push(obj);
      // formData.value.push(obj);
    });
    console.log('weekList-1', weekList);
    // onDuty(roomId.value);
    onCancelSelectDuty();
  }
};

// 设置值日生
const onDutys = debounce(function () {
  let studentDuty = [];
  btnLoading.value = true;
  weekList.forEach(item => {
    if (item.content) {
      item.content.forEach(i => {
        studentDuty.push({
          dormitoryId: i.dormitoryId,
          roomId: i.roomId,
          classId: i.classId,
          studentName: i.studentName,
          studentUserId: i.studentUserId,
          weekInfo: item.id
        });
      });
    }
  });

  let obj = {
    roomId: roomId.value,
    roomDutyBO: studentDuty
  };
  createRoomDuty(obj)
    .then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg);
        // onDuty(roomId.value);
        onCancelSelectDuty();
      } else {
        message.error(res.data.msg);
      }
    })
    .finally(() => {
      btnLoading.value = false;
      dutyArrangement.visible = false;
    });
}, 500);

// 删除值日生
const onDelDuty = data => {
  for (let i = 0; i < weekList.length; i++) {
    if (weekList[i].id === Number(weekPlan.value)) {
      console.log('data', weekList[i]);
      weekList[i].content = [];
    }
  }
  // onDuty(roomId.value);
  // weekList.forEach(item=>{
  //   if (item.id===Number(weekPlan.value)){
  //
  //   }
  // })
  // let obj = {
  //   roomId: roomId.value,
  //   week: weekPlan.value
  // };
  // removeRoomDuty(obj).then(res => {
  //   if (res.data.code === 200) {
  //     message.success(res.data.msg);
  //     onDuty(roomId.value);
  //     onDuty(roomId.value);
  //   } else {
  //     message.error(res.data.msg);
  //   }
  // });
};

/** ***** 文件上传 ********/
// 房间/值日批量导入 弹窗
const batchImport = reactive({
  title: '房间批量导入',
  visible: false,
  width: '286px',
  iconType: 'default',
  state: 'room'
});
// 批量导入失败 详情 弹窗
const batchImportInfo = reactive({
  title: '批量导入详情',
  visible: false,
  width: '1000px',
  iconType: 'default',
  state: 'room'
});
// 批量导入失败数据
const batchExportList = ref([]);
// 批量导入失败数据列表项
const batchExportColumns = reactive([
  {
    key: 'roomName',
    title: '房间号',
    dataIndex: 'roomName',
    scopedSlots: { customRender: 'roomName' },
    width: 200
  },
  {
    key: 'dormitoryName',
    title: '所属宿舍楼',
    dataIndex: 'dormitoryName',
    scopedSlots: { customRender: 'dormitoryName' },
    width: 200
  },
  {
    key: 'storey',
    title: '所在楼层',
    dataIndex: 'storey',
    scopedSlots: { customRender: 'storey' },
    width: 200
  },
  {
    key: 'bedNum',
    title: '床位数', // 床位号
    dataIndex: 'bedNum',
    scopedSlots: { customRender: 'bedNum' },
    width: 200
  },
  {
    key: 'attributeName',
    title: '房间属性',
    dataIndex: 'attributeName',
    scopedSlots: { customRender: 'attributeName' },
    width: 200
  },
  {
    key: 'roomPhone',
    title: '房间电话',
    dataIndex: 'roomPhone',
    scopedSlots: { customRender: 'roomPhone' },
    width: 200
  },
  {
    key: 'reason',
    title: '原因',
    dataIndex: 'reason',
    scopedSlots: { customRender: 'reason' },
    width: 200
  }
]);
// 文件列表
const fileList = ref([]);
// 房间/值日批量导入 弹窗 按钮
const onExport = value => {
  batchImport.visible = true;
  batchImport.state = value;
  if (value === 'room') {
    batchImport.title = '房间批量导入';
  } else if (value === 'duty') {
    batchImport.title = '上传值日安排';
  }
};
// 文件上传之前回调
const beforeUpload = file => {
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('上传文件不能大于2MB!');
  }
  return isLt2M;
};
// 自定义上传成功回调
const httpRequest = value => {
  fileList.value = [value.file];
};
// 文件上传状态改变回调
const onChangeUpload = (file, fileList, event) => {
  console.log(file, fileList, event);
};
// 批量导入失败数据
const errorExportList = ref([]);
// 确认上传
const onUploadFile = debounce(() => {
  btnLoading.value = true;
  if (!fileList.value.length) {
    message.error('请上传文件');
    btnLoading.value = false;
    return;
  }
  let form = new FormData();
  form.append('file', fileList.value[0]);
  if (batchImport.state === 'duty') {
    createRoomDutyExcel(form)
      .then(res => {
        if (res.data.code === 200) {
          let dutyInfo = res.data.data;
          if (dutyInfo.schDutyExcelList.length) {
            errorExportList.value = dutyInfo.schDutyExcelList;
            errorExportInfo.visible = true;
            roomDutyExcel.value = dutyInfo;
            btnLoading.value = false;
          } else {
            message.success(res.data.msg);
            btnLoading.value = false;
            getRoomList(1);
          }
        } else {
          message.error(res.data.msg);
          btnLoading.value = false;
        }
      })
      .catch(() => {
        message.error('模板格式错误，请重新选择');
        btnLoading.value = false;
      })
      .finally(() => {
        onCancelUploadFile();
      });
  } else if (batchImport.state === 'room') {
    createRoomExcel(form)
      .then(res => {
        if (res.data.code === 200) {
          let roomInfo = res.data.data;
          if (!roomInfo.roomExcelList.length) {
            message.success(res.data.msg);
            btnLoading.value = false;
            // getRoomList(1);
          } else {
            batchExportList.value = roomInfo.roomExcelList;
            batchImportInfo.visible = true;
            roomExcel.value = roomInfo;
            btnLoading.value = false;
          }
          // 有成功的数据 刷新列表
          if (roomInfo.successNumber * 1 !== 0) {
            getRoomList(1);
          }
        } else {
          btnLoading.value = false;
          message.error(res.data.msg);
        }
      })
      .catch(() => {
        message.error('模板格式错误，请重新选择');
        btnLoading.value = false;
      })
      .finally(() => {
        onCancelUploadFile();
      });
  }
}, 500);
// 取消上传
const onCancelUploadFile = () => {
  fileList.value = [];
  batchImport.visible = false;
  btnLoading.value = false;
};
// 模板下载
const onDownloadTemplate = type => {
  let fileName = '下载模板';
  if (type === 3) {
    fileName = '房间下载模板';
  } else if (type === 2) {
    fileName = '值日安排模板';
  }
  template(type).then(res => {
    let blob = new Blob([res.data], {
      type: 'application/vnd.ms-excel' // 将会被放入到blob中的数组内容的MIME类型
    });
    let objectUrl = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = objectUrl;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(link.href);
  });
};

/** ***** 删除房间 ********/
// 是否选择删除房间
const isDelRoom = ref(false);
// 删除房间 弹窗
const delRoomDialog = reactive({
  title: '温馨提示',
  visible: false,
  width: '328px',
  iconType: 'default',
  state: true
});
// 删除房间 弹窗 提示内容
const delRoomText = ref('');
// 删除房间 方法
const onDelRoom = () => {
  if (!selectedRowKeys.value.length) {
    message.warning('请选择房间');
    return;
  }
  delRoomDialog.visible = true;
  delRoomDialog.state = true;
  delRoomText.value = '【删除房间】将无法恢复，请确认是否删除。';
};
// 删除房间列表
const onDeleteRoom = debounce(() => {
  btnLoading.value = true;
  if (delRoomDialog.state) {
    deleteRoom(selectedRowKeys.value)
      .then(res => {
        if (res.data.code === 200) {
          message.success(res.data.msg);
          delRoomDialog.visible = false;
          isDelRoom.value = false;
          getRoomList(1);
          btnLoading.value = false;
        } else {
          delRoomText.value = '所选房间当前存在住宿信息，不可删除。';
          delRoomDialog.state = false;
          btnLoading.value = false;
        }
      })
      .catch(() => {
        btnLoading.value = false;
      });
  } else {
    selectedRowKeys.value = [];
    delRoomDialog.visible = false;
    btnLoading.value = false;
  }
}, 500);

/** ******************************************************************************* */
// // label样式
// const labelCol = reactive({
//   xs: { span: 4 },
//   sm: { span: 7 }
// });
// const wrapperCol = reactive({
//   xs: { span: 24 },
//   sm: { span: 16 }
// });
// label样式
const labelCol = reactive({
  xs: { span: 12 },
  xl: { span: 10 },
  xxl: { span: 6 }
});
const wrapperCol = reactive({
  xs: { span: 24 },
  xl: { span: 24 },
  xxl: { span: 24 }
});
// 表单查询
const formRoomRef = ref();

// 上传文件 start
const onFinish = () => {
  console.log('onFinish');
};
// 选择房间属性
const onFinishRoomAttribute = value => {
  console.log('选择的房间属性是什么', value);
  if (value === 0 || value === 1) {
    formRoomStateRoomType.value.roomType = 0;
    formRoomState.value.roomAttributeNew = value;
  } else {
    formRoomStateRoomType.value.roomType = 1;
    if (value === 3) {
      formRoomState.value.roomAttributeNew = 1;
    }
    if (value === 4) {
      formRoomState.value.roomAttributeNew = 0;
    }
    if (value === 5) {
      formRoomState.value.roomAttributeNew = 2;
    }
  }
  if (value === undefined) {
    formRoomStateRoomType.value = {
      roomType: null
    };
    formRoomState.value.roomAttribute = null;
    formRoomState.value.roomAttributeNew = null;
  }
};
const btnLoading = ref(false);
</script>
<style>
/* 修改宿舍楼模板弹窗样式 */

.room-type-new .micro-dormitory-modal-title {
  font-size: 18px;
  font-weight: 500;
  color: #222222;
}
.room-type-new .micro-dormitory-modal-header {
  border: none;
  padding-bottom: 0;
  padding-top: 24px;
}

.room-type-new .micro-dormitory-modal-body {
  padding-top: 16px;
}
</style>
<style lang="less" scoped>
@import './index.less';
/deep/.micro-dormitory-popover-inner-content {
  width: 200px;
}
/deep/.micro-dormitory-select-arrow {
  top: 40%;
}
.fileListStyle {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; //行数
  -webkit-box-orient: vertical;
}
/deep/.micro-dormitory-select-selection-item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 5rem !important;
}
/deep/.micro-dormitory-modal-close-x {
  width: 39px !important;
}
// /deep/.micro-dormitory-cascader-menu {
//   white-space: nowrap !important;
//   overflow: hidden !important;
//   text-overflow: ellipsis !important;
//   width: 270px !important;
// }
/deep/.micro-dormitory-cascader-menu-item-content,
/deep/.micro-dormitory-cascader-menu-item,
/deep/.micro-dormitory-cascader-menu-item-expand {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 270px !important;
}
.checkOutStyleBottom {
  margin-bottom: 16px;
}
.checkOutStyleNew {
  width: 100%;
  box-sizing: border-box;
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  cursor: pointer;
  .checkOutStyleNewChild {
    display: flex;
    align-items: center;
  }
  .studentFloorLeftIcon {
    width: 40px;
    height: 40px;
  }
  .studentFloorLeftText {
    font-size: 16px;
    font-weight: 400;
    color: #222222;
  }
}
.checkOutStyleNewStudent {
  background: rgba(86, 214, 183, 0.1);
}
.checkOutStyleNewTeacher {
  background: rgba(254, 143, 143, 0.1);
}

.cursor {
  cursor: pointer;
}
/deep/.micro-dormitory-cascader-picker:hover .micro-dormitory-cascader-picker-clear {
  color: rgba(0, 0, 0, 0.25) !important;
}
// /deep/.micro-dormitory-table-content {
//   min-height: 60vh;
// }
</style>
